<template>

  <body>
    <div class="index">
      <div class="index-top">
        <div class="logo">练习场 </div>
        <img style="margin-top: 20px;height: 50px;" src="/imgs/LucideLabBasketball.png" alt="">
        <div style="margin-left: 1050px;margin-top: 30px;">

          <el-breadcrumb-item><a href="/">退出</a></el-breadcrumb-item>
        </div>
        <img style="margin-top: 30Px; height: 20px;" src=" /imgs/MaterialSymbolsExitToApp.png" alt="">

      </div>
      <div class="index-under">
        <div class="index-menu">
          <el-skeleton :loading="loading" :rows="10">
            <el-col :span="12">
        
              
              <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="Transparent" text-color="#aaa" style="font-weight: bolder;"
                active-text-color="skyblue">
                
                <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">首页</span>
  </el-menu-item>
                <el-submenu index="1">
                  
                  <template slot="title">
                    <i class="el-icon-location"></i>
                  
                    <span>组织架构</span>
                  </template>
                  <el-menu-item-group>

                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                  </el-menu-item-group>

                  <el-menu-item index="1-3">选项3</el-menu-item>
                  <el-menu-item index="1-4">选项4</el-menu-item>


                </el-submenu>
                <el-submenu index="2">
                  
                  <template slot="title">
                    <i class="el-icon-location"></i>
                  
                    <span>权限管理</span>
                  </template>
                  <el-menu-item-group>

                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                  </el-menu-item-group>

                  <el-menu-item index="1-3">选项3</el-menu-item>
                  <el-menu-item index="1-4">选项4</el-menu-item>


                </el-submenu>
              </el-menu>

            </el-col>
          </el-skeleton>
        </div>

        <div class="index-main">
          <div class="mbx">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">组织架构</a></el-breadcrumb-item>
              
            </el-breadcrumb>
          </div>
        </div>

      </div>
    </div>

  </body>
</template>

<style>
 
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;


}

.mbx {

  border-bottom: 1px solid rgb(212, 210, 210);
}

.index-top {

  display: flex;
  width: 100vw;
  height: 100px;
  border-bottom: 1px solid rgb(212, 210, 210);

}

.index-menu {


  border-right: 1px solid rgb(212, 210, 210);
  height: 100vh;
  width: 200px;

}

.index-under {
  width: 100vw;
  height: 100vh;
  display: flex;

}







.logo {
  margin-top: 10px;
  border-right: 1 solid black;
  font-size: 50px;
  font-weight: bolder;
}

.el-col-12 {
  width: 100%;
}

.el {
  background-color: rgb(255, 255, 255 0.1);
}

.index-main {
  flex: 1;
  border: 1px solid #eee;
  height: 650px;
  border-radius: 5px;
  background: #fcfcfc;
  box-shadow: 5px 11px 27px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;

}
</style>
<script>
export default {
  data() {
    return {
      loading: true,
    }

  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
}

</script>